<template lang="pug">
  div
    app-url
    main-search
    notice-divider
    .home-title
      font.name 精品推荐
      font.gray 总有一款属于你
    goods-list(:goods="goods")
    load-more(v-if="loading")
    packet-handler
</template>

<script>
import GoodsList from './components/GoodsList'
import MainSearch from './components/MainSearch'
import AppUrl from './components/AppUrl'
import NoticeDivider from './components/NoticeDivider'
import Window from './helpers/window'
import LoadMore from './components/LoadMore'
import PacketHandler from './components/PacketHandler'

export default {
  name: 'Home',
  components: {
    GoodsList,
    MainSearch,
    NoticeDivider,
    LoadMore,
    PacketHandler,
    AppUrl
  },
  data () {
    return {
      goods: [],
      page: 1,
      loading: false,
      showLoading: true
    }
  },
  methods: {
    getGoods () {
      this.loading = true
      this.$http.get('/proxy/api/goods', {params: {page: this.page}}).then((res) => {
        this.loading = false
        if (res.data.length === 0) {
          this.noData()
        }
        res.data.map((item) => {
          this.goods.push(item)
        })
        this.page += 1
      }, (err) => {
        console.log(err)
        this.noData()
      })
    },
    noData () {
      this.showLoading = false
      this.tip = '没有更多数据了'
    },
    listenScroll () {
      var _self = this
      window.onscroll = function () {
        if (Window.touchBottom() && _self.loading === false) {
          _self.getGoods()
        }
      }
    }
  },
  mounted () {
    this.getGoods()
    this.listenScroll()
  }
}
</script>
<style lang="sass">
@import './styles/color.sass';
.home-title
  background: $white
  padding: 5px 10px
  border-bottom: $gray-bg 1px solid
  font.name
    font-size: 1.1em
    font-weight: bold
    &:after
      content: ' '
  font.gray
    color: $gray
    font-size: .8em
</style>
